<template>
	<view class="content">
		
		<!-- #ifdef MP-WEIXIN -->
		<view class="weixin-header"></view>
		<!-- #endif -->
		
		<!-- logo -->
		<view class="content-header">
			<image src="https://img520.com/fxxRwb.png" class="logo"></image>
		</view>
		
		<!-- user & pwd -->
		<form>
			<view class="form-item">
				<image src="../../static/images/账号.png" class="form-item-image"></image>
				<input type="text" v-model="loginData.account" placeholder="请输入账号" class="form-item-input"/>
			</view>
			<view class="form-item">
				<image src="../../static/images/密码.png"class="form-item-image"></image>
				<view class="form-item-input">
					
					<input v-if="!isLook" type="password" v-model="loginData.password" placeholder="请输入密码"/>
					<image v-if="!isLook" :src="eye_close" class="form-item-image" @click="watchPwd"></image>
					
					<input v-if="isLook" type="text" v-model="loginData.password" placeholder="请输入密码"/>
					<image v-if="isLook" :src="eye" class="form-item-image" @click="watchPwd"></image>
					
				</view>
			</view>
			
			<!-- loginBtn & registerBtn -->
			<view class="content-btn">
				<view>
					<image src="../../static/images/登录.png" class="login-btn" @click="onLogin"></image>
				</view>
				<view class="content-btn-reg-forget">
					<text class="register-text" @click="onRegister">注册</text>
					<text class="forget-text" @click="forgetPwd">忘记密码</text>
				</view>
			</view>
		</form>
		
		<contentBottom></contentBottom>
	</view>
</template>

<script>
	import contentBottom from '../../components/content-bottom/content-bottom.vue';
	export default {
		data() {
			return {
				loginData: {
					account: '',
					password: ''
				},
				eye_close: '/static/images/查看密码(no).png',
				eye: '/static/images/查看密码(yes).png',
				isLook: false
			}
		},
		onLoad(e) {
			if(e) {
				let account = e.account;
				this.loginData.account = account;
			}
		},
		components: {
			contentBottom
		},
		methods: {
			onLogin() {
				let that = this;
				uni.request({
					url: 'http://localhost:8888/user/account/login',
					method: 'POST',
					data: that.loginData,
					header: {
						'Content-Type': 'application/json',
					},
					success: (res) => {
						if(res.statusCode == 200) {
							if(res.data.data.code == 0) {
								uni.showToast({
									title: res.data.data.msg,
									icon: 'success'
								})
								setTimeout(() => {
									uni.switchTab({
										url: '/pages/index/index'
									}, 1000)
								})
								
							} else {
								uni.showToast({
									title: res.data.data.msg,
									icon: 'none'
								})
							}
						}
					}
				})
				
			},
			watchPwd() {
				let that = this;
				that.isLook = !that.isLook;
			},
			onRegister() {
				uni.navigateTo({
					url: '/pages/login/register/register'
				})
			},
			forgetPwd() {
				uni.navigateTo({
					url: '/pages/login/forgetPwd/forgetPwd'
				})
			}
		}
	}
</script>
<style scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	
	.login-btn {
		margin: 5% 40% 0;
		width: 100rpx;
		height: 100rpx;
		cursor: pointer; /* 鼠标显示手型 */
		border-radius: 50%;
	}
	
	.logo {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 50% 0 0 0;
		width: 300rpx;
		height: 300rpx;
	}
	
	.form-item {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 10% 0 10% 0;
	}
	
	.form-item-image {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 50rpx;
		height: 50rpx;
	}
	
	.form-item-input {
		display: flex;
		margin: 0 0 0 5%;
		border-bottom: 1px solid #ccc;
		width: 90%;
	}
	
	.content-btn-reg-forget {
		display: flex;
		font-size: 28rpx;
	}
	
	.register-text {
		margin: 5% 30% 5% 5%;
		color: #b3b3b3;
	}
	
	.forget-text {
		margin: 5% 0 0 25%;
		color: #b3b3b3;
	}
	
	.content-bottom {
		margin-top: 45%;
		font-size: 10rpx;
		color: #b3b3b3;
	}
	
	.weixin-header {
		margin-top: 20%;
	}
</style>
